人一生的「幸福指數」呈現 U 型曲線分佈,猜猜哪一個年紀歲數是 U 的低端?
在介紹 Vue 的修飾符(Modifiers)之前我們來複習一下和修飾符一起搭配使用的事件監聽指令v-on
。
事件監聽與觸發在網頁上的應用非常廣,無論是滑鼠移動、按鍵輸入、或是在網頁上點擊某一個區塊,都可以因為這個互動讓網頁做些事。但在程式裡,其實就是瀏覽者做了某些事(事件監聽),然後我們要給出什麼反應(事件觸發)。例如點一下按鍵,我們要程式去做某些事,或是呼叫某支函式要它做些什麼,或者,我們希望能取到瀏覽者所點擊到的值(例如點擊的座標位置)。
我們先來看一下在 Codepen 的範例效果:Vue.js Event Handling 事件處理
這範例中我們分三個部分來示範在事件處理時, 以及 Vue 會用到的一些指令。
我們可以使用 vue 的@click="觸發事件的方法"
來監聽與綁定事件:
第一個按鈕test1
: 一般的觸發事件,直接取到我們點擊按鈕的值。
第二個按鈕test2
: 帶參數的觸發事件,可直接取到我們給的參數。
第三個按鈕test3
: 點擊的事件,可加上 vue 的特殊變數$event
來監聽,但事實上如果我們沒有加上$event
此參數,vue 也會自動幫我們抓取event
監聽的對象。
第四個按鈕test4
: 希望可以帶參數,同時又可取到監聽對象的值。
<button @click="test1">test1</button>
<!-- 綁定自己的資料 -->
<button @click="test2('Hello')">test2</button>
<!-- 可利用vue的特殊變數$event 來拿到button的值 -->
<!-- 等同這樣寫: <button @clock="test3">test3</button> -->
<button @click="test3($event)">test3</button>
<!-- 想傳自己給的變數,同時想取得點取 event 的值 -->
<button @click="test4(42,$event )">test4</button>
在實例中的 methods 準備好觸發的方法函式:
methods: {
test1() {
alert('test1')
},
test2(msg) {
alert(msg)
},
test3(event) {
// 透過 event裡的target與innerHTML去取得按鈕的內容
alert(event.target.innerHTML)
},
test4(nbr, event) {
alert(nbr + '---' + event.target.innerHTML)
},
}
在觸發事件的時候,可以傳遞自定義參數與事件的修飾符,寫法和呼叫函式的傳參類似,例如,如果我們希望觸發事件除了以「點擊」的方式,也希望「按下 entre」也能觸發,那就可以在元素裡觸發方法加上修飾符.entre
來達到效果。
Vue 的事件修飾符有很多種,在此介紹最常用的幾種:
在原生的 Javascript 如果要防止冒泡行為或預設行為,需要在 JavaScript 裡的監聽對象加上stopPropagation()
例如有兩個大小疊在一起、可點擊的 box,如果想點擊小 box,也會同時觸發到在它底部的大 box ,這即是「冒泡事件」。
在 vue 裡,只要在希望被點取的那個 div(這裡指小 box) 的@click=""
加上.stop
,如@click.stop=""
即可阻止冒泡事件,非常方便。
如果有一個連結,我們想阻止事件的默認行為,也就是點擊後不想直接導向到連結網址去該怎麼做?在原生的 JavaScript 我們同樣需要使用event.preventDefault()
來阻止 html 裡的預設行為,但是在 vue 裡,只要在 html 使用事件修飾符prevent
就可以達到效果。
<!-- 防止(stop)事件冒泡 -->
<div class="box1" @click="test5">
<div class="box2" @click.stop="test6"></div>
</div>
<!-- 阻止事件默認行為 -->
<a href="http://google.com" @click.prevent="test7">去google</a>
在實例的 methods 準備好觸發的方法:
methods:{
test5() {
alert('out')
},
test6() {
alert('inner')
},
test7(event) {
alert('點到了')
},
}
通常我們在 input 填好資料時,需要按一個送出的按鈕來送出,但其實用 enter 鍵會直覺很多,使用 Vue 的按鍵修飾符@keyup
來指定監聽的方式是鍵盤輸入,如果想指定某一個鍵,需要知道按下的那個鍵的鍵碼,才能指定,如果不知道我們指定的鍵的鍵碼,可以用alert(event.keyCode)
來查詢。
原生的寫法可用條件式判斷if (event.keyCode === 13)
(這裡的 13 是 enter 鍵的鍵值),確定點到的是指定的鍵。在 Vue 可直接將鍵碼加到 keyup 後面 --> keyup.13
或是直接寫鍵名(只限定特殊鍵)keyup.enter
也可以達到一樣的效果。
<!-- 想使用enter鍵輸入 -->
<input type="text" @keyup.13="test8" />
<input type="text" @keyup.enter="test8" />
在實例的 methods 準備好觸發的方法:
methods:{
test8($event) {
alert(event.target.value + '--' + event.keyCode)
}
}
在 Vue 裡還有許多其他的事件修飾符:stop / prevent / capture / self / once / passive。用法可以參閱官方文件事件處理 — Vue.js 來了解各項用法。
Vue 把以往需要在 JavaScript 裡寫的程式碼,全部改成在 HTML 就可處理的指令,的確方便許多,但也要知道 Javascript 的原生寫法,才不會改天需要寫原生寫不出來,這就是 Vue 的方便會費人 JS 武功的原因了。
參考:
Vue.js 修飾符
每日一句法文有益身心:D'accord ! --> 搭.勾! --> 好的! --> 要和我一起吃飯嗎?d'accord